<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8"/>
        <title>供应商信息展示页面</title>
        <meta name="renderer" content="webkit"/>
        <link rel="stylesheet" href="../../css/font.css"/>
        <link rel="stylesheet" href="../../css/xadmin.css"/>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../js/xadmin.js"></script>
        <script src="../../js/vue2.7min.js"></script>
        <script src="../../js/axios.min.js"></script>
    </head>
    <body>
        <div class="x-nav">
            <a
                    class="layui-btn layui-btn-small"
                    style="line-height: 1.6em; margin-top: 3px; float: right"
                    onclick="location.reload()"
                    title="刷新"
            >
                <i class="layui-icon layui-icon-refresh" style="line-height: 30px"></i
                ></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card" id="app">
                        <div class="layui-card-header">
                            <button
                                    class="layui-btn"
                                    v-show="level===0"
                                    onclick="xadmin.open('添加用户','./manager-add.html',600,400)">
                                <i class="layui-icon"></i>添加
                            </button>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>性别</th>
                                    <th>手机</th>
                                    <th>状态</th>
                                    <th>权限</th>
                                    <th>创建时间</th>
                                    <th>修改时间</th>
                                    <th>创建人</th>
                                    <th>修改人</th>
                                    <th>操作</th>

                                </tr>
                                </thead>
                                <tbody>

                                <!--模板开始-->
                                <tr v-for="(item , index) in records">
                                    <td>{{index+1}}</td>
                                    <td v-text="item.id"></td>
                                    <td v-text="item.name"></td>
                                    <td v-text="item.sex"></td>
                                    <td v-text="item.phone"></td>
                                    <td class="td-status">
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              v-if="item.status===1"
                                              style="background-color: green"
                                              @click="changeStatus(item.id)">已启用</span>
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              v-if="item.status===0"
                                              style="background-color: tomato"
                                              @click="changeStatus(item.id)">已禁用</span>
                                    </td>
                                    <td>
                                        <span class="layui-btn layui-btn-normal layui-btn-mini" v-if="item.level===0"
                                              style="background-color: slateblue">超级管理员</span>
                                        <span class="layui-btn layui-btn-normal layui-btn-mini" v-if="item.level===1"
                                              style="background-color: orange">普通管理员</span>
                                    </td>
                                    <td v-text="item.createTime"></td>
                                    <td v-text="item.updateTime"></td>
                                    <td v-text="item.createUser"></td>
                                    <td v-text="item.updateUser"></td>
                                    <td class="td-manage">
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              v-if="vm.level===0 && item.id!=1"
                                              style="background-color: orange"
                                              onclick="xadmin.open('修改用户','./manager-edit.html',600,400)">编辑</span>
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              v-if="vm.level===0 && item.id!=1"
                                              style="background-color: red"
                                              @click="deleteById(item.id)">删除</span>
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              v-if="vm.level===0 && item.id===1"
                                              style="background-color: red">超级管理员不可以编辑或者删除哦</span>
                                    </td>
                                </tr>
                                <!--模板结束-->
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-card-body">
                            <div class="page">
                                <div>
                                    <a class="prev" @click="getAllLeft">&lt;&lt;</a>
                                    <a class="num" v-text="current-1" v-if="vm.current>1" @click="getAllLeft"></a>
                                    <span class="current" v-text="current"></span>
                                    <a class="num" v-text="current+1" v-if="vm.current<vm.pages"
                                       @click="getAllRight"></a>
                                    <a class="num" v-text="pages" v-if="vm.current+1 < vm.pages" @click="getAllMax"></a>
                                    <a class="next" @click="getAllRight">&gt;&gt;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    //管理员信息
                    id: null,
                    name: null,
                    level: null,
                    phone: null,
                    realName: null, sex: null,
                    status: null,
                    createTime: null,
                    updateTime: null,
                    createUser: null,
                    updateUser: null,
                    //分页属性
                    current: 1,
                    records: null,
                    total: null,
                    size: null,
                    pages: null

                },
                methods: {
                    //获取url参数
                    url1(name) {
                        //获取上一地址中的get参数
                        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                        var r = window.location.search.substr(1).match(reg);
                        if (r != null)
                            return unescape(r[2]);
                        return null;
                    },
                    getAll() {
                        var t = {num1: this.current};
                        axios.post("../../../manager/getAllByPage", t)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.current = response.data.data.current;
                                    vm.records = response.data.data.records;
                                    vm.total = response.data.data.total;
                                    vm.size = response.data.data.size;
                                    vm.pages = response.data.data.pages;
                                }
                                vm.dateStyle();

                            })

                    },
                    getAllLeft() {
                        var t;
                        if (this.current === 1) {
                            t = {num1: this.current};
                        } else {
                            t = {num1: this.current - 1};
                        }
                        axios.post("../../../manager/getAllByPage", t)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.current = response.data.data.current;
                                    vm.records = response.data.data.records;
                                    vm.total = response.data.data.total;
                                    vm.size = response.data.data.size;
                                    vm.pages = response.data.data.pages;
                                }
                                vm.dateStyle();
                            }, function (err) {
                                console.log(err);

                            })

                    },
                    getAllRight() {
                        var t;
                        if (this.current === this.pages) {
                            t = {num1: this.current};
                        } else {
                            t = {num1: this.current + 1};
                        }
                        axios.post("../../../manager/getAllByPage", t)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.current = response.data.data.current;
                                    vm.records = response.data.data.records;
                                    vm.total = response.data.data.total;
                                    vm.size = response.data.data.size;
                                    vm.pages = response.data.data.pages;
                                }
                                vm.dateStyle();
                            }, function (err) {
                                console.log(err);

                            })

                    },
                    getAllMax() {
                        var t = {num1: this.pages};
                        axios.post("../../../manager/getAllByPage", t)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.current = response.data.data.current;
                                    vm.records = response.data.data.records;
                                    vm.total = response.data.data.total;
                                    vm.size = response.data.data.size;
                                    vm.pages = response.data.data.pages;
                                }
                                vm.dateStyle();
                            }, function (err) {
                                console.log(err);

                            })

                    },               //根据id获取账号信息。判断身份，展示不同页面信息
                    getManagerInfo() {
                        axios.post("../../../manager/getOneById")
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.id = response.data.data.id;
                                    vm.name = response.data.data.name;
                                    vm.level = response.data.data.level;
                                    vm.phone = response.data.data.phone;
                                    vm.sex = response.data.data.sex;
                                    vm.status = response.data.data.status;
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },
                    changeStatus(id) {
                        //修改管理员状态
                        console.log("开始改变目标状态，id=   " + id)
                        if (vm.level !== 0) {
                            layer.alert("权限不足只有超级管理员可以哦", {
                                icon: 6
                            })
                        } else {

                            var jsonData = {id: id}
                            axios.post("../../../manager/changeStatus", jsonData)
                                .then(function (response) {
                                    //数据保存到vue全局
                                    if (response.data.code === 1) {
                                        console.log(response.data.data)
                                        xadmin.father_reload()
                                    }
                                }, function (err) {
                                    console.log(err);

                                })
                        }
                    },
                    deleteById(id) {
                        //修改管理员状态
                        console.log("开始删除的id=   " + id)
                        var jsonData = {id: id}
                        axios.post("../../../manager/deleteById", jsonData)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    console.log(response.data.data)
                                    xadmin.father_reload()
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },
                    dateStyle() {
                        //处理时间格式数据
                        var s1 = null;
                        for (let o of vm.records) {
                            s1 = o.createTime;
                            o.createTime = s1[0] + "-" + s1[1] + "-" + s1[2] + "  " + s1[3] + ":" + s1[4] + ":" + s1[5]
                            s1 = o.updateTime;
                            o.updateTime = s1[0] + "-" + s1[1] + "-" + s1[2] + "  " + s1[3] + ":" + s1[4] + ":" + s1[5]
                        }
                    }


                },
                mounted: function () {
                    //axios访问后台数据
                    this.getManagerInfo();
                    this.getAll();
                }, created: function () {
                }
            });
        </script>
    </body>

</html>